<script>
export default {
  name: "Welcome",
  methods: {
    /**
     * 去 登录/暂不登录
     * @param $status 登录1，暂不登录2
     */
    handleSign($status) {
      this.$emit("signStatus", $status);
    }
  },
  mounted() {
  }
};
</script>

<template>
  <div class="body">
    <div class="welcome">
      <div class="welcome-cont">
        <div class="welcome-logo">
          <img src="/static/images/logo.png" class="logoimg"/>
        </div>
        <div class="welcome-ms">
          <h1>HELLO!</h1>
          <h5>欢迎来到
            <span class="span">爱宠之行</span>
          </h5>
        </div>
        <div class="welcome-btn clearfix">
          <button class="kslogin" @click="handleSign(1)">快捷登陆</button>
          <button class="nologin">暂不登陆</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style>

.body {
  background-color: rgb(246 247 251);
}

.welcome {
  background: url(http://aczxyh.ctmon.com.cn/pc/acimg/a26.png) no-repeat;
  background-size: cover;
  height: 100vh;
}
.welcome .welcome-cont {
  padding: 25px;
  padding-top: 50px;
}
.logoimg {
  height: 158px;
  width: 158px;
  display: block;
  margin: 0 auto;
}
.welcome-ms {
  margin: 30px 0 100px;
}
._h1 {
  color: rgb(88 107 169);
  font-weight: bold;
  font-size: 62px;
}
._h5 {
  color: rgb(88 107 169);
  font-size: 28px;
  line-height: 42px;
  font-weight: 400;
}
.span {
  font-weight: bold;
  background: url(http://aczxyh.ctmon.com.cn/pc/acimg/a28.png) no-repeat left bottom;
  background-size: contain;
}

.kslogin {
  background-color: #586ba9;
  color: white;
  display: block;
  width: 46%;
  font-size: 16px;
  border-radius: 24px;
  line-height: 38px;
  margin-bottom: 20px;
  border: 1px solid rgb(97 115 173 / 25%);
  font-weight: bold;
  float: left;
  margin: 2%;
}
.nologin {
  display: block;
  width: 46%;
  font-size: 16px;
  background-color: white;
  border-radius: 24px;
  line-height: 38px;
  margin-bottom: 20px;
  border: 1px solid rgb(97 115 173 / 25%);
  color: rgb(88 107 169);
  font-weight: bold;
  float: left;
  margin: 2%;

}


</style>
